<%--
  Created by IntelliJ IDEA.
  User: zjsxx
  Date: 2018/1/25
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/form_validate.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:15 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>EasyLink 新用户注册</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/style.min862f.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>用户注册 </h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">用户名：</label>
                            <div class="col-sm-8">
                                <input id="userLoginName" name="userLoginName" class="form-control" type="text">
                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 您以后登录使用的用户名</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">昵称：</label>
                            <div class="col-sm-8">
                                <input id="userNickName" name="userNickName" class="form-control" type="text"
                                       aria-required="true" aria-invalid="false" class="valid">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">密码：</label>
                            <div class="col-sm-8">
                                <input id="userPassword" name="userPassword" class="form-control" type="password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">确认密码：</label>
                            <div class="col-sm-8">
                                <input id="confirm_password" name="confirm_password" class="form-control"
                                       type="password">
                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">E-mail：</label>
                            <div class="col-sm-8">
                                <input id="userEmail" name="userEmail" class="form-control" type="email">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号码：</label>
                            <div class="col-sm-8">
                                <input id="userPhone" name="userPhone" class="form-control" type="text"
                                       aria-required="true" aria-invalid="false" class="valid">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" class="checkbox" id="agree" name="agree">
                                        我已经认真阅读并同意《EasyLink使用协议》
                                    </label>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button id="subBtn" class="btn btn-primary" type="button">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-sm-3"></div>
    </div>
</div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/content.min.js?v=1.0.0"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/js/plugins/validate/messages_zh.min.js"></script>
<script src="/js/demo/form-validate-demo.min.js"></script>
<script src="/js/jquery.json.js"></script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>

<script>
    $(document).ready(function () {
        $('#subBtn').click(function () {
                var check = $('#signupForm').valid();
                var userLoginName;
                var userNickName;
                var userPassword;
                var userEmail;
                var userPhone;
                //检测表单是否可以提交
                if (check) {
                    //数据获取
                    userLoginName = $('#userLoginName').val();
                    userNickName = $('#userNickName').val();
                    userPassword = $('#userPassword').val();
                    userEmail = $('#userEmail').val();
                    userPhone = $('#userPhone').val();
                    //发送ajax请求
                    $.ajax({
                        type: 'POST',
                        url: '/user/insert',
                        dataType: 'json',
                        contentType: "application/json; charset=utf-8",
                        data: $.toJSON({
                            "userLoginName": userLoginName,
                            "userNickName": userNickName,
                            "userPassword": userPassword,
                            "userEmail": userEmail,
                            "userPhone": userPhone
                        }),
                        success: function (message) {
                            if (message.status == 200) {
                                alert('账号注册成功');
                            } else {
                                alert('账号注册失败:' + message.msg);
                            }
                        },
                        error: function (message) {
                            console.log(message);
                        }
                    });
                }
            }
        );
    });
</script>
</body>
</html>
